<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="ThemeBucket">
    <link rel="shortcut icon" href="#" type="image/png">

    <title>Registration</title>

    <script src="js/jquery-1.10.2.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/modernizr.min.js"></script>

    <script>
        $(function () {
            //判断输入框是否为空
            $("body").on("click","#tijiao",function () {
                checknull();
            });

            /**
             * 判断输入框输入是否为空,为空则输入框变为红色,否则绿色
             */
            $("body").on("blur","#username",function () {
                var username = $("[name='username']").val();
                if(username==""){
                    $("#username").css({
                        'border-color':'red'
                    });
                }else{
                    $("#username").css({
                        'border-color':'green'
                    });
                }
            });
            $("body").on("blur","#ename",function () {
                var ename = $("[name='ename']").val();
                if(ename==""){
                    $("#ename").css({
                        'border-color':'red'
                    });
                }else{
                    $("#ename").css({
                        'border-color':'green'
                    });
                }
            });
            $("body").on("blur","#password",function () {
                var password = $("[name='password']").val();
                if(password==""){
                    $("#password").css({
                        'border-color':'red'
                    });
                }else{
                    $("#password").css({
                        'border-color':'green'
                    });
                }
            });
            $("body").on("blur","#email",function () {
                var email = $("[name='email']").val();
                var isEmail =  /^([\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
                if(email==""||!isEmail.test(email)){
                    $("#email").css({
                        'border-color':'red'
                    });
                }else{
                    $("#email").css({
                        'border-color':'green'
                    });
                }
            });
            $("body").on("blur","#tel",function () {
                var tel = $("[name='tel']").val();
                var istel =  /(^1[0-9]{10}$)/;
                if(tel==""||!istel.test(tel)){
                    $("#tel").css({
                        'border-color':'red'
                    });
                }else{
                    $("#tel").css({
                        'border-color':'green'
                    });
                }
            });
            $("body").on("blur","#address",function () {
                var address = $("[name='address']").val();
                if(address==""){
                    $("#address").css({
                        'border-color':'red'
                    });
                }else{
                    $("#address").css({
                        'border-color':'green'
                    });
                }
            });
            $("body").on("blur","#mgr",function () {
                var mgr = $("[name='mgr']").val();
                if(mgr==""){
                    $("#mgr").css({
                        'border-color':'red'
                    });
                }else{
                    $("#mgr").css({
                        'border-color':'green'
                    });
                }
            });
            $("body").on("blur","#sal",function () {
                var sal = $("[name='sal']").val();
                if(sal==""){
                    $("#sal").css({
                        'border-color':'red'
                    });
                }else{
                    $("#sal").css({
                        'border-color':'green'
                    });
                }
            });
            $("body").on("blur","#comm",function () {
                var comm = $("[name='comm']").val();
                if(comm==""){
                    $("#comm").css({
                        'border-color':'red'
                    });
                }else{
                    $("#comm").css({
                        'border-color':'green'
                    });
                }
            });
            $("body").on("blur","#authoritys",function () {
                var authoritys = $("[name='authoritys']").val();
                if(authoritys==""){
                    $("#authoritys").css({
                        'border-color':'red'
                    });
                }else{
                    $("#authoritys").css({
                        'border-color':'green'
                    });
                }
            });
        });

        function checknull() {
            var username = $("[name='username']").val();
            var ename = $("[name='ename']").val();
            var password = $("[name='password']").val();
            var email = $("[name='email']").val();
            var tel = $("[name='tel']").val();
            var address = $("[name='address']").val();
            var mgr = $("[name='mgr']").val();
            var sal = $("[name='sal']").val();
            var comm = $("[name='comm']").val();
            var deptno = $("[name='deptno']").val();
            var authoritys = $("[name='authoritys']").val();
            var isEmail =  /^([\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
            var istel =  /(^1[0-9]{10}$)/;
            if(username==""||ename==""||password==""||email==""||tel==""||address==""||mgr==""||sal==""||comm==""||deptno==""||authoritys==""){
                alert("未输入完整!");
                return false;
            }else if(!isEmail.test(email)){
                alert("邮箱格式错误!");
                return false;
            }else if(!istel.test(tel)){
                alert("手机号格式错误!");
                return false;
            }
            else{
                $("#form").submit();
            }
        }

    </script>

    <!--common-->
    <div th:include="commons :: comhead"></div>
</head>

<body class="login-body">

<div class="container">

    <form id="form" class="form-signin" th:action="@{/boss_regist}" method="post">
        <div class="form-signin-heading text-center">
            <h1 class="sign-title">注册</h1>
            <img src="images/login-logo.png" alt=""/>
        </div>


        <div class="login-wrap">
            <p>请输入员工信息</p>
            <input type="text" autofocus="" id="username" name="username"placeholder="用户名" class="form-control">
            <input type="text" autofocus="" id="ename" name="ename" placeholder="真实名字" class="form-control">
            <input type="text" autofocus="" id="password" name="password" placeholder="密码" class="form-control">
            <input type="text" autofocus="" id="email" name="email" placeholder="邮箱" class="form-control">
            <input type="text" autofocus="" id="tel" name="tel" placeholder="手机号" class="form-control">
            <input type="text" autofocus="" id="address" name="address" placeholder="住址" class="form-control">
            <input type="text" autofocus="" id="mgr" name="mgr" placeholder="上级编号" class="form-control">
            <input type="text" autofocus="" id="sal" name="sal" placeholder="工资" class="form-control">
            <input type="text" autofocus="" id="comm" name="comm" placeholder="奖金" class="form-control">
            <select class="form-control tooltips" name="deptno">
                    <option>请选择部门</option>
                  <option th:each="dept:${deptList}" th:value="${dept.deptno}" th:text="${dept.dname}"></option>
            </select>
            <input type="text" autofocus="" id="authoritys" name="authoritys" placeholder="权限赋予" class="form-control">
            <table border="1px">
                <thead>
                    <tr>
                        <th>权限编号</th>
                        <th>权限描述</th>
                    </tr>
                </thead>
                <tbody>
                    <tr th:each="authority : ${authorityList}">
                        <td th:text="${authority.AId}">XXX</td>
                        <td th:text="${authority.AInfo}">XXX</td>
                    </tr>
                </tbody>
            </table>
            <label class="checkbox">
                <h5>欢迎使用OA办公系统</h5>
            </label>
            <button type="button" id="tijiao" class="btn btn-lg btn-login btn-block">
                <i class="fa fa-check">加入公司</i>
            </button>
        </div>

    </form>

</div>



<!-- Placed js at the end of the document so the pages load faster -->

<!-- Placed js at the end of the document so the pages load faster -->

</body>
</html>
